<template>
  <div class="export-container">
    <div class="item">
      <el-checkbox size="medium" v-model="isAll" label="全部"></el-checkbox>
    </div>
    <div class="item" v-for="(item,index) in exportCols" :key="index">
      <el-checkbox size="medium" v-model="item.selected" :label="item.name"></el-checkbox>
    </div>
    <div style="margin-top: 10px">
      <el-button type="primary" @click="exportMedicine">导出（已选{{num}}）</el-button>
      <el-button @click="hide">取消</el-button>
    </div>
  </div>
</template>

<script>
    export default {
      name: "export-dialog",
      props: {
        merchant_id: '',
        is_shop: '',
        keyword: '',
        classify_id: ''
      },
      watch: {
        isAll(val) {
          if(val==true){
            this.exportCols.forEach((item) => {
              item.selected = true
            })
          } else{
            this.exportCols.forEach((item) => {
              item.selected = false
            })
          }
        }
      },
      computed: {
        num() {
          let num = 0
          this.exportCols.forEach((item,index) => {
            if(item.selected){
              num = num + 1
            }
          })
          return num
        }
      },
      data() {
        return{
          isAll: false,
          exportCols: [
            {selected: false,name: 'UPC',field: 'upc'},
            {selected: false,name: '商品编号',field: 'ssn'},
            {selected: false,name: '商品名称',field: 'name'},
            {selected: false,name: '售价',field: 'selling_price'},
            {selected: false,name: '库存',field: 'stock'},
            {selected: false,name: '展示状态',field: 'is_shop'},
            {selected: false,name: '所属门店',field: 'merchant_id'},
            {selected: false,name: '药品类型',field: 'drug_type'},
            {selected: false,name: '商品分类',field: 'goods_type'}
            ]
        }
      },

      methods: {
        async exportMedicine() {

          let col = []
          console.log(this.exportCols)
          this.exportCols.forEach((item,index) => {
            if(item.selected){
              col.push(item.field)
            }
          })


          let res = await this.$api.exportMedicine({
            merchant_id: this.merchant_id,
            is_shop: this.is_shop,
            keyword: this.keyword,
            classify_id: this.classify_id,
            col: col
          })
          if(res.data.level==='success'){
            window.location.href=res.data.data
            this.$emit('hideExportDialog')
          } else {
            this.$message.error(res.data.message)
          }
        },

        hide() {
          this.$emit('hideExportDialog')
        }

      }

    }
</script>

<style scoped>
.item{
  padding: 10px 0;
  font-size: 25px !important;
}

  /deep/ .el-dialog__body{
    padding: 20px;
    font-size: 18px;
  }

</style>
